Beachten: In SVG gibt es keine Möglichkeit, den Ursprung einer Transformation zu ändern, so wie es in CSS mit transform-origin geht. In diesem Beispiel wird darum der schwarze Kreis in eine Gruppe gesetzt, die mit translate() ins Zentrum geschoben wird.
Füge weitere Elemente (rect, text) ein und transformiere/animiere sie.
Im Stylesheet gelten für alle children des SVG die gleichen Transition-Eigenschaften. Wenn du dich sicher fühlst, kannst du für verschiedene Elemente verschiedene Timings definieren.
Tipps
Um verschiedene Elemente zu unterscheiden, kannst du id und class verwenden.
Um in CSS die id zu referenzieren, braucht es eine Raute: #my-id.
Um in CSS die class zu referenzieren, braucht es einen Punkt .my-class.